<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<html>
<head>
    <title>menu</title>
    <link href="menu.css" rel="stylesheet"/>
    <script type="text/javascript">
        var sourcehover =
                [
                    "button/Categories-hover1.png",
                    "button/PreTest-hover1.png",
                    "button/PostTest-hover1.png",
                    "button/Learn-hover1.png",
                    "button/Games-hover1.png"

                ];
        var sourceleave =
                [
                    "button/Categories.png",
                    "button/Pretest.png",
                    "button/Posttest.png",
                    "button/Learn.png",
                    "button/Games.png"
                ];
        function iconhover(id) {
            var img = document.getElementById('icon' + id);
            img.src = sourcehover[id];
        }
        function iconleave(id) {
            var img = document.getElementById('icon' + id);
            img.src = sourceleave[id];
        }
    </script>
</head>
<body>
<ul>
    <li><a href="categories.jsp" onmouseover="iconhover(0)" onmouseout="iconleave(0)"><img id="icon0"
                                                                                           src="/button/Categories.png"></a>
    </li>
    <li><a><img src="/button/Test.png"></a>

        <ul>
            <li><a href="pretest.jsp" onmouseover="iconhover(1)" onmouseout="iconleave(1)"><img id="icon1"
                                                                                                src="/button/Pretest.png"></a>
            </li>
            <li><a href="posttest.jsp" onmouseover="iconhover(2)" onmouseout="iconleave(2)"><img id="icon2"
                                                                                                 src="/button/Posttest.png"></a>
            </li>
        </ul>
    </li>
    <li><a href="learn.jsp" onmouseover="iconhover(3)" onmouseout="iconleave(3)"><img id="icon3"
                                                                                      src="/button/Learn.png"></a></li>
    <li><a href="games.jsp" onmouseover="iconhover(4)" onmouseout="iconleave(4)"><img id="icon4"
                                                                                      src="/button/Games.png"></a></li>
</ul>

</body>
</html>


